<template>
  <div class="task-manage">
    <el-form :inline="true" v-model="searchParams" class="search-form">
      <el-form-item label="任务名称" class="form-input">
        <el-input
          v-model.trim="searchParams.taskName"
          clearable
          @clear="getTaskData"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit(1)"
          >查询</el-button
        >
        <el-button size="small" @click="resetLoad">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-wrapper">
      <div class="table-title">
        <span class="table-title-text">任务管理</span>
        <div>
          <el-button type="primary" size="small" @click="createTask">
            创建任务
          </el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column
          prop="taskName"
          label="任务名称"
          width="200"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="任务说明"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.remark || "---" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sourceDataName"
          label="同步数据源"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.sourceDataName || "---" }}
          </template>
        </el-table-column>
        <el-table-column
          label="调度类型/频率"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.scheduleDescription || "---" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="lastExcuteTime"
          label="最近执行时间"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.lastExcuteTime || "---" }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="150" align="center">
          <template slot-scope="scope">
            <span
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <img
                :src="
                  taskStatus[scope.row.status]
                    ? taskStatus[scope.row.status].icon
                    : ''
                "
                style="width: 16px; height: auto"
                alt=""
              />
              &nbsp;
              <span>{{
                taskStatus[scope.row.status]
                  ? taskStatus[scope.row.status].label
                  : "---"
              }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="300">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.status === 0"
              :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="openEdit(scope.row)"
            >
              编辑
            </el-link>
            <el-link
              :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="openConfig(scope.row)"
              >配置</el-link
            >
            <el-link
              v-if="scope.row.status === 0"
              :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="deleteRow(scope.row)"
              >删除</el-link
            >
            <el-link
              :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="changeStatus(scope.row)"
            >
              <template v-if="scope.row.status === 1"> 禁用 </template>
              <template v-else> 启用 </template>
            </el-link>
            <el-link
              v-if="scope.row.status === 1"
              :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="executeTaskNow(scope.row)"
              >立即执行</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        small
        layout="total, prev, pager, next, sizes, jumper"
        :page-sizes="[10, 20, 30]"
        :total="total"
        :hide-on-single-page="!total"
        :page-size.sync="searchParams.pageSize"
        :pager-count="7"
        :current-page.sync="searchParams.pageNum"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-backtop target=".table-wrapper"></el-backtop>
    <OperaDialog ref="operaDialogRef" @reload="getTaskData" />
    <PointerConfig ref="pointerConfigRef" />
    <OtherConfig ref="otherConfigRef" />
  </div>
</template>
<script>
import { updateCookie } from "@/plugins/utils/auth";
import OperaDialog from "./manageComponents/OperaDialog.vue";
import PointerConfig from "./manageComponents/PointerConfig.vue";
import OtherConfig from "./manageComponents/OtherConfig.vue";
export default {
  name: "TaskManage",
  components: {
    OperaDialog,
    PointerConfig,
    OtherConfig,
  },
  data: () => {
    return {
      searchParams: {
        taskName: null, // 任务名称
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
      },
      tableList: [], // 数据列表
      total: 0, // 数据总条数
      loading: false,
      taskStatus: {
        0: {
          label: "草稿",
          icon: require("../../../../assets/svg/waitFillBlue.svg"),
        },
        1: {
          label: "启用",
          icon: require("../../../../assets/svg/success.svg"),
        },
        2: {
          label: "禁用",
          icon: require("../../../../assets/svg/noSuccess.svg"),
        },
      },
    };
  },
  created() {
    if (this.$route.query.token) {
      updateCookie("token", this.$route.query.token);
    }
    // 获取数据列表
    this.getTaskData();
  },
  mounted() {},
  methods: {
    // 获取任务数据
    getTaskData() {
      this.loading = true;
      this.$axios
        .post(
          this.$api.dataConnection.dataAggregation.getTaskList,
          this.searchParams
        )
        .then((res) => {
          if (res.data.code === 200) {
            let data = res.data.data;
            this.tableList = data.list;
            this.total = data.total;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查询
    onSubmit(pageNum) {
      this.searchParams.pageNum = pageNum ? pageNum : this.searchParams.pageNum;
      this.getTaskData();
    },
    resetLoad() {
      this.searchParams.pageNum = 1;
      this.searchParams.taskName = null;
      this.getTaskData();
    },
    // 修改当前页码
    handleCurrentChange() {
      this.getTaskData();
    },
    // 修改每页条数
    handleSizeChange() {
      this.getTaskData();
    },
    // 新增任务数据
    createTask() {
      this.$refs.operaDialogRef.openDialog();
    },
    openEdit(row) {
      this.$refs.operaDialogRef.openDialog(row);
    },
    openConfig(row) {
      if (row.taskType === 1) {
        this.pointerConfig(row);
      } else {
        // this.$refs.otherConfigRef.openDialog(row);
        this.otherConfig(row);
      }
    },
    // 指标任务配置
    pointerConfig(row) {
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getTaskConfig, {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            Object.assign(row, res.data.data || {});
            this.$refs.pointerConfigRef.openDialog(row);
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    // 其他任务配置
    otherConfig(row) {
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getTaskConfig, {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            Object.assign(row, res.data.data || {});
            this.$refs.otherConfigRef.openDialog(row);
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    // 删除数据
    deleteRow(row) {
      this.$confirm(`确定删除此任务？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .get(this.$api.dataConnection.dataAggregation.deleteTask, {
            params: {
              id: row.id,
            },
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message || "操作成功");
              this.getTaskData();
            } else {
              this.$message.warning(res.data.message);
            }
          });
      });
    },
    changeStatus(row) {
      this.$confirm(
        `是否确认${row.status === 1 ? "禁用" : "启用"}该任务？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$axios
            .get(this.$api.dataConnection.dataAggregation.ableTask, {
              params: {
                id: row.id,
              },
            })
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message || "操作成功");
                this.getTaskData();
              } else {
                this.$message.warning(res.data.message);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    executeTaskNow(row) {
      var formData = new FormData();
      formData.append("taskId", row.id);
      this.$axios
        .post(this.$api.dataConnection.dataAggregation.executeTask, formData)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message || "操作成功");
            this.getTaskData();
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.task-manage {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;

  .search-form {
    padding: 16px 32px;
    border-radius: 4px;
    background: #ffffff;

    .el-form-item {
      margin-bottom: 0;
    }

    .form-input {
      margin-right: 32px;

      /deep/ .el-input__inner {
        width: 240px;
        height: 32px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #e0e0e0;
      }
    }
  }

  .el-select {
    /deep/ .el-input__inner {
      width: 240px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #e0e0e0;
    }
  }

  .table-wrapper {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    margin-top: 16px;
    padding: 16px 32px 40px;
    border-radius: 4px;
    background: #ffffff;

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .table-title-text {
        border-left: 5px solid $--color-primary;
        padding-left: 10px;
        margin: 8px 0;
        font-size: 16px;
        line-height: 16px;
      }

      margin-bottom: 10px;
    }

    .little-circle-blue {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #55c898;
      position: relative;
      right: 4px;
      top: -2px;
    }

    .little-circle-red {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #ee5564;
      position: relative;
      right: 6px;
      top: -2px;
    }

    .page-wrapper {
      margin-top: 28px;
      display: flex;
      justify-content: flex-end;
      color: rgba(0, 0, 0, 0.65);

      .data-counter {
        font-weight: 400;
        line-height: 32px;
        margin-right: 24px;
      }

      /deep/ .btn-prev,
      /deep/ .btn-next {
        margin: 0 4px;
        min-width: 28px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0;
      }

      /deep/ .el-pager .number {
        min-width: 28px;
        height: 28px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin: 0 4px;
        cursor: pointer;
      }
    }
  }

  .ontology-edit {
    padding: 0 10px;

    & + .ontology-edit {
      border-left: 1px solid #dddddd;
    }
  }

  /deep/ .el-table__append-wrapper {
    padding: 10px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;

    .form-input /deep/ .el-input {
      width: 200px;
    }

    /deep/ .el-input__inner {
      height: 22px;
    }
  }

  /deep/ .el-dialog {
    border-radius: 5px;
  }
}
</style>
